<template>
  <div class="box">
    <div class="hd"></div>
    <div class="bd">
      <div class="row">
        <!-- div.col*3{$} -->
        <div class="col" style="width: calc(100% / 3);">
          <div style="height:20%; ">
            <div class="row">
              <div class="col">
                <div>今日出工人数 <span class="d">111</span> </div>
                <div>安全帽违规 <span class="d">111</span> </div>
                <div>反光衣违规 <span class="d">111</span> </div>
              </div>
              <div class="col"></div>
            </div>
          </div>
          <div style="height:20%; ">
            <div class="row">
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
            </div>
          </div>
          <div style="height:60%; ">
            <video ref="videoElement1" controls playsinline muted></video>
          </div>
        </div>
        <div class="col" style="width: calc(100% / 3);">
          <div style="height:20%; ">1</div>
          <div style="height:20%; ">
            <div class="row">
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
            </div>
          </div>
          <div style="height:60%; ">
            <video ref="videoElement2" controls playsinline muted></video>
          </div>
        </div>
        <div class="col" style="width: calc(100% / 3);">
          <div style="height:20%; ">1</div>
          <div style="height:20%; ">
            <div class="row">
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
              <div class="col"><video class='flv' controls playsinline muted></video></div>
            </div>
          </div>
          <div style="height:60%; ">
            <video ref="videoElement3" controls playsinline muted></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 2.引入echarts
import * as echarts from 'echarts'
// 4.引入websocket
import io from 'socket.io-client'

import flvjs from 'flv.js';
export default {
  data () {
    return {
      playArr: {},
      // FLV视频的URL
      from_url: 'http://192.168.111.128:8080/live/streamName.flv',
      to_url: 'http://192.168.111.128:8080/live/livestream.flv'
    };
  },
  mounted () {
    this.initFlvPlayer();
    this.initSocket()
  },

  methods: {
    initSocket () {
      // 生成对象
      this.socket = io('http://127.0.0.1:5000/build/detection')
      // 监听服务端(my_response)的事件 ,data发送的消息
      this.socket.on('my_response', (data) => {
        // console.log(data)
        // 将json 类型的字符串转成对象
        const json = JSON.parse(data)
        const arr = document.querySelectorAll('.d')
        arr.forEach((item, index) => {
          item.innerHTML = json.l1[index]
        })
        // const option = {
        //   series: [
        //     {
        //       id: 1,
        //       data: json.l1,
        //     },
        //     {
        //       id: 2,
        //       data: json.l2,
        //     },
        //   ]
        // }
        // this.myChart.setOption(option)
      })
    },
    showEcharts1 () {
      // 3.将echarts 初始化到div中
      this.myChart = echarts.init(this.$refs.echarts1)
      // 4.配置项
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        // 系列
        series: [
          {
            id: 1,
            name: '销量',
            // 数据
            // 柱状图
            type: 'bar',
            // stack 堆叠
            stack: 'aa',
            data: [120,
              {
                value: 200,
                // 每个柱子的样式
                itemStyle: {
                  color: 'red'
                },
                // 单独的宽不生效
              }, 150, 80, 70, 110, 130],
            // barWidth: 1,
            label: {
              show: true,
              // top / left / right / bottom / inside
              // / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。
              position: 'insideTop',
              // -90,90
              rotate: 90,
              // 文字大小
              fontSize: 10,
              // 格式化
              // {a}：系列名。{b}：数据名。{c}：数据值。
              formatter: '{c}是水电费 {b}'
            }
          },
          {
            id: 2,
            name: '销量2',
            // 数据
            // 柱状图
            type: 'bar',
            stack: 'bb',
            data: [130, 210, 160, 90, 80, 120, 140],
          },
          {
            name: '销量3',
            // 数据
            // 柱状图
            type: 'bar',
            stack: 'cc',
            data: [11, 10, 14, 7, 6, 10, 12],
          }
        ]
      };
      // 5.将配置项放到myChart中
      this.myChart.setOption(option)
    },
    initFlvPlayer () {
      if (!flvjs.isSupported()) {
        console.error('FLV 不支持');
        return
      }
      console.log(Object.keys(this.$refs))
      for (const key in this.$refs) {
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          // 浏览器端开启flv.js的worker,多进程运行flv.js
          enableWorker: true,
          // 直播模式
          isLive: true,
          // 关闭音频
          hasAudio: false,
          // 不关闭视频
          hasVideo: true,
          // 音频缓存大小，单位为秒，默认值为 0.5 秒
          audioBufferSize: 0.5,
          // 视频缓存大小，单位为秒，默认值为 0.5 秒
          videoBufferSize: 0.5,
          // 是否启用全屏幕模式
          enableFullscreen: true,
          url: this.from_url
        });
        flvPlayer.attachMediaElement(this.$refs[key]);
        flvPlayer.load();
        setTimeout(() => {
          flvPlayer.play();
        }, 1000);
        this.playArr[key] = flvPlayer;
      }

      const domArr = document.querySelectorAll('.flv')
      console.log(domArr)
      for (let i = 0; i < 1; i++) {
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          // 浏览器端开启flv.js的worker,多进程运行flv.js
          enableWorker: true,
          // 直播模式
          isLive: true,
          // 关闭音频
          hasAudio: false,
          // 不关闭视频
          hasVideo: true,
          // 音频缓存大小，单位为秒，默认值为 0.5 秒
          audioBufferSize: 0.5,
          // 视频缓存大小，单位为秒，默认值为 0.5 秒
          videoBufferSize: 0.5,
          // 是否启用全屏幕模式
          enableFullscreen: true,
          url: this.to_url
        });
        flvPlayer.attachMediaElement(domArr[i]);
        flvPlayer.load();
        setTimeout(() => {
          flvPlayer.play();
        }, 1000);
      }
    },
    beforeDestroy () {
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF')
}

video {
  width: 100%;
  height: 100%;
}

.d {
  font-size: 30px;
  font-weight: 700;
  color: #f00;
  font-family: electronicFont;
}

.box {
  box-sizing: border-box;
  background-color: #ccc;
  height: 100vh;

  .hd {
    height: 15%;
    background-color: red;
  }

  .bd {
    height: 85%;
  }

  .row {
    height: 100%;
    display: flex;
  }

  .col {
    flex: 1;
    border: 1px solid #000;
  }

}
</style>
